//json循环 开始
new Vue({
    el:"#asd",
    data:{
        message:"下午好，同学！"
    },
    mounted(){
        axios
            .get("json/news.json")
            .then(response => this.message = response.data.urls)
            .catch(function(error){
                console.log(error);
            })
    }
});
//json循环 结束

function s(){
    //0，页面初次渲染的时候，小计会是每个商品的单价*数量
    let li = document.querySelectorAll("#asd li");
//总价
    let all = document.querySelector("#all");
    let allnum = 0;

    for(let i = 0;i < li.length; i++){
        console.log("单价");
        console.log(li[i].children[2].children[0].innerHTML);
        console.log("数量");
        console.log(li[i].children[3].children[0].value);
        console.log("小计");
        console.log(li[i].children[4].children[0]);

        var price = li[i].children[2].children[0].innerHTML;
        var num = li[i].children[3].children[0].value;

//    小计
        var total = li[i].children[4].children[0].innerHTML = price * num;

        console.log(total);
        allnum += total;
    }

    console.log(allnum);
//1.当页面初次渲染的时候，小计的总和赋值给总价
    all.innerHTML = allnum.toFixed(2);
}
s();

//2.只要数量的input内容发生改变，小计和总价就会更新
let num_all = document.querySelectorAll("#asd .num");
    for (let j =0 ; j<num_all.length; j++){
        num_all[j].addEventListener("change",s);
    }

//3.删除操作之后，再根据小计计算总价
let del_all = document.querySelectorAll("#asd .del");
for (let k =0 ; k<del_all.length; k++){
    console.log(del_all);
    del_all[k].addEventListener("click",function(){
        console.log(this.parentNode.parentNode);
        //console.log(this.parentNode);
        this.parentNode.parentNode.removeChild(this.parentNode);

        s();
    })
}
